<template>
  <div class="head_box">
    <div class="head"  >
      <div class="auto clearfix">
        <a href="#" class="hd_logo">
          <img src="" alt="" class="img" />
          <!--          <img src="../../../public/images/logo.png" alt="" class="img"/>-->
        </a>
        <div class="hd_user">
          <div class="txt">
<!--            <h6 class="tit cursorHand"  @click="toBigScreen">智慧大屏</h6>-->
            <p class="fz">
              <span>{{nowTime}}</span>
              <span>{{week}}</span>
              <span>{{weather}}</span>
              <!-- <span>第{{weekDay}}周</span>-->
            </p>
          </div>
          <div class="quitbox">
            <a-popover placement="bottom">
              <template slot="content">
                <span class="cursorHand" v-if="nickname == '游客'" @click="login">登录</span>
                <span class="cursorHand" v-else @click="logout">退出登录</span>
              </template>
              <span class="cursorHand" style="height: 20px;margin-right:30px;">
                <img src="../../../public/images/icon_01.png" alt="">
                <span style="font-size: 20px; vertical-align: middle; margin-left: 10px; color: #ffffff">{{ nickname }}</span>
              </span>
            </a-popover>
            <!-- <a-dropdown>
              <span class="logoinLink" style="height: 20px;">
                <img src="../../../public/images/icon_01.png" alt="">
                <span style="font-size: 20px; vertical-align: middle; margin-left: 10px;">{{ nickname }}</span>
              </span>
              <a-menu slot="overlay">
                  <a-menu-item key="1" @click="login" v-if="nickname == '游客'">
                    <a-icon type="user" />
                    <span>登录</span>
                  </a-menu-item>
                  <a-menu-item key="2" v-else @click="logout">
                    <a-icon type="login" />
                    <span>退出登录</span>
                  </a-menu-item>
                </a-menu>
              </a-dropdown> -->
            <!-- <div class="drop">
              <a href="###" class="wz" id="quit">退出登录</a>
            </div> -->

          </div>
        </div>
      </div>
    </div>
    <div class="hd_nav" >
      <div class="auto">
        <ul >
          <li :class="$route.path.indexOf('/home')? '': 'cur'">
            <router-link to="/home">首页</router-link>
          </li>
          <li :class="$route.path.indexOf('/articleList')? '': 'cur'">
            <router-link to="/articleList">文章列表</router-link>
          </li>
          <li :class="$route.path.indexOf('/worksShow')? '': 'cur'">
            <router-link to="/worksShow">作品展示</router-link>
          </li>

          <li :class="$route.path.indexOf('/personalDiaries')? '': 'cur'" v-if="isRender">
            <router-link to="/personalDiaries">个人日志</router-link>
          </li>
          <li :class="$route.path.indexOf('/deviceInformation')? '': 'cur'" v-if="isRender">
            <router-link to="/deviceInformation">记账本</router-link>
          </li>
          <li :class="$route.path.indexOf('/messageBook')? '': 'cur'">
            <router-link to="/messageBook">留言簿</router-link>
          </li>
          <li :class="$route.path == '/downloadZone'? 'cur': ''">
            <router-link to="/downloadZone">下载专区</router-link>
          </li>
          <li :class="$route.path == '/links'? 'cur': ''">
            <router-link to="/links">友情链接</router-link>
          </li>
          <li :class="$route.path.indexOf('/noticeNotice')? '': 'cur'">
            <router-link to="/noticeNotice">公告</router-link>
          </li>
          <!--          <li :class="$route.path.indexOf('/largeScreenSettings')? '': 'cur'" v-if="isRender">-->
          <!--            <router-link to="/largeScreenSettings">设置</router-link>-->
          <!--          </li>-->
          <li :class="$route.path.indexOf('/articleManage')? '': 'cur'" v-if="isRender">
            <router-link to="/articleManage">文章管理</router-link>
          </li>
          <li :class="$route.path.indexOf('/linkTotal')? '': 'cur'" v-if="isRender">
            <router-link to="/linkTotal">链接管理</router-link>
          </li>
          <li :class="$route.path.indexOf('/imgMan')? '': 'cur'" v-if="isRender">
            <router-link to="/imgMan">轮播图管理</router-link>
          </li>
        </ul>
      </div>
    </div>
    <a-back-top />
    <LoginModal ref="LoginModal"></LoginModal>
  </div>
</template>

<script>
  import { mapActions } from 'vuex'
  import Vue from 'vue'
  import { ACCESS_TOKEN, USER_INFO } from '@/store/mutation-types'
  import LoginModal from './modules/Login'
  import '../../../public/css/style.css'
  import store from '@/vuex/store'
  import { getAction } from '@/api/manage'
  import axios from 'axios'
  Vue.prototype.$axios = axios
  export default {
    name: 'M-Header',
    components: {
      LoginModal
    },
    data() {
      return {
        nickname: '游客',
        nowTime: '',
        weekDay: '',
        weather: '',
        city: '',
        week: '',
        isRender: false
      }
    },
    created() {
      if (Vue.ls.get(USER_INFO) && Vue.ls.get(USER_INFO).username) {

        this.nickname = Vue.ls.get(USER_INFO).name

        console.log(Vue.ls.get(USER_INFO))
        console.log(Vue.ls.get(USER_INFO).role)
        if (Vue.ls.get(USER_INFO).role == '1') {
          this.isRender = true
        } else {
          this.isRender = false
        }
      } else {
        this.isRender = false
        this.nickname = '游客'
      }
      this.NowTime()
      // this.getWeekOfYear()
      this.getWeekDay()
      // this.searchWeather()
      // this.getFirstDate()
    },
    methods: {
      ...mapActions(['Logout']),
      toBigScreen() {
        window.open('http://localhost:3000')
      },
      // getFirstDate() {
      //   let self = this
      //   getAction('/bigscreen/getfirstweek', {}).then(res => {
      //     if (res.code == 0) {
      //       self.weekDay = self.TodayInfo(res.result.fistweek.split(' ')[0]).week
      //     } else {
      //       self.$message.error(res.msg)
      //     }
      //   })
      // },
      logout() {
        const that = this
        this.$confirm({
          title: '提示',
          content: '真的要注销登录吗 ?',
          onOk() {
            that.$message.success('退出成功！')
            Vue.ls.remove(ACCESS_TOKEN)
            Vue.ls.remove(USER_INFO)
            window.location.href = '/'
            return that.Logout({}).then(() => {
              that.$router.push({ path: '/home' })
            }).catch(err => {
              that.$message.error({
                title: '错误',
                description: err.message
              })
            })
          },
          onCancel() {
          }
        })
      },
      login() {
        // let username = this.userInfo().username
        this.$refs.LoginModal.show()
      },
      NowTime() {
        //获取年月日
        let time = new Date()
        let year = time.getFullYear()
        let month = time.getMonth() + 1
        let day = time.getDate()

        this.nowTime = year + '年' + month + '月' + day + '日'
      },
      getWeekOfYear() {
        var today = new Date()
        var firstDay = new Date(today.getFullYear(), 0, 1)
        var dayOfWeek = firstDay.getDay()
        var spendDay = 1
        if (dayOfWeek != 0) {
          spendDay = 7 - dayOfWeek + 1
        }
        firstDay = new Date(today.getFullYear(), 0, 1 + spendDay)
        var d = Math.ceil((today.valueOf() - firstDay.valueOf()) / 86400000)
        var result = Math.ceil(d / 7)
        this.weekDay = result + 1
      },
      GetMonday(dd) {
        var week = dd.getDay() //获取时间的星期数
        var minus = week ? week - 1 : 6
        dd.setDate(dd.getDate() - minus) //获取minus天前的日期
        var y = dd.getFullYear()
        var m = dd.getMonth() + 1 //获取月份
        var d = dd.getDate()
        return y + '-' + m + '-' + d
      },
      TodayInfo(start) {
        var WEEKLEN = 7,
          WEEKDAYS = [
            '日',
            '一',
            '二',
            '三',
            '四',
            '五',
            '六'
          ],
          weekInfo = {
            'week': null
          } // 初始化返回信息，默认第null周，星期null
        let oneDay = 24 * 60 * 60 * 1000 // 一天的毫秒时长
        let weekLeave  // 开学当天所在周剩余天数
        let weekStart // 开学当天start是星期几
        let dateDiff // 今天与开学当天日期差
        let sDate //开学之日，日期对象
        sDate = new Date(this.GetMonday(new Date(start)))
        weekStart = sDate.getDay()
        weekStart = weekStart === 0 ? 7 : weekStart // JS中周日的索引为0，这里转换为7，方便计算
        weekLeave = WEEKLEN - weekStart
        let today = new Date()
        today = new Date(today.getFullYear() + '/' + (today.getMonth() + 1) + '/' + today.getDate())
        dateDiff = today - sDate
        dateDiff = parseInt(dateDiff / oneDay)
        weekInfo.week = Math.ceil((dateDiff - weekLeave) / WEEKLEN) + 1
        return weekInfo
      },
      //var td = TodayInfo('2017/3/1');
      //'第 ' + td.week + ' 周，今天星期' + td.day;
      getWeekDay() {
        let tempDate = new Date()
        let days = tempDate.getDay()
        let week
        switch (days) {
          case 1:
            week = '星期一'
            break
          case 2:
            week = '星期二'
            break
          case 3:
            week = '星期三'
            break
          case 4:
            week = '星期四'
            break
          case 5:
            week = '星期五'
            break
          case 6:
            week = '星期六'
            break
          case 0:
            week = '星期日'
            break
        }
        this.week = week
      },
      searchWeather: function() {

        var  _this = this;

        this.$axios.get('http://wthrcdn.etouch.cn/weather_mini?city=福州').then(function(reponse) {
          console.log(reponse.data.data)
          console.log(reponse.data.data.forecast[0].type)
          _this.weather = '福州'+'\xa0\xa0\xa0\xa0'+reponse.data.data.forecast[0].type+'\xa0\xa0\xa0\xa0'+reponse.data.data.wendu+'℃'


        }).catch(() => {
        })



      }



    },
    store
  }
</script>

